<!-- 日志-->
<template>
    <div style="margin-top: 25px;">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="登录" name="1"></el-tab-pane>
            <el-tab-pane label="退出登录" name="2"></el-tab-pane>
            <el-tab-pane label="新增房源" name="3"></el-tab-pane>
            <el-tab-pane label="修改房源" name="4"></el-tab-pane>
            <el-tab-pane label="删除房源" name="5"></el-tab-pane>
            <el-tab-pane label="新增客源" name="6"></el-tab-pane>
            <el-tab-pane label="修改客源" name="7"></el-tab-pane>
            <el-tab-pane label="删除客源" name="8"></el-tab-pane>
            <el-tab-pane label="楼盘字典" name="9"></el-tab-pane>
            <el-tab-pane label="部门" name="12"></el-tab-pane>
            <el-tab-pane label="员工" name="10"></el-tab-pane>
            <el-tab-pane label="合同" name="11"></el-tab-pane>
        </el-tabs>
        <div class="search" style="margin-top:35px;"> 
            <el-form :inline="true" :model="searchData" size="mini" class="demo-form-inline">
                <el-form-item label="部门" prop="u_d_id">
                    <el-select v-model="searchData.u_d_id" @change="obtainUser">
                        <el-option label="全部" value=""></el-option>
                        <!-- <el-option v-for="(item,index) in optionName" :key="index" :label="item.name" :value="item.id"></el-option> -->
                        <el-option-group v-for="group in optionName" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item label="员工" prop="u_id">
                    <el-select v-model="searchData.u_id">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in userType" :key="index" :label="item.u_username" :value="item.u_id"></el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="日期" prop="start_time">
                    <el-date-picker type="date" placeholder="请选择" v-model="searchData.start_time" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>_
                <el-form-item label="" prop="end_time">
                    <el-date-picker type="date" placeholder="请选择" v-model="searchData.end_time" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class='content'>
            <div class='list' style="margin-top: 25px;">
                <el-table :data="list.data" tooltip-effect="light" style="width: 100%;">
                    <el-table-column align="center" prop="name" label="部门" width="150px"></el-table-column>
                    <el-table-column align="center" prop="u_username" label="用户" width="150px"></el-table-column>
                    <el-table-column align="center" prop="l_content" label="操作内容" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="l_create_time" label="操作时间" width="150px"></el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination :current-page="current" @current-change="handleCurrentChange" :total="list.total" style="margin-top:30px;"></el-pagination>
            </div>
        </div>
    </div>
</template>
<style>
    .home .view-content{
        width: 87%;
    }
    .el-form-item__label,.el-form-item__content{
        font-size: 12px;
    }
    .el-input{
        padding-right: 5px;
    }
    .el-select-dropdown__item{
        font-size: 12px;
        padding: 0px 10px;
        height: 26px;
        line-height: 26px;
    }
    .el-input,.el-date-editor.el-input{
        width: 145px;
    }
</style>
<script>
    import conf from '../../config/userconf.js'
    export default {
        data() {
            return {
                list:[],
                searchData: {
                    u_d_id: '',
                    u_id: '',
                    start_time: '',
                    end_time: '',
                }, 
                optionName: [],
                userType: [],
                initdate: true,  //日期判断   默认读取后台返回日期，条件查询时则读取查询时的日期
                activeName: '1',   //选中项name
                current: 1,  //页码
            }
        },
        methods: {
            /* 列表*/
            getList (data=Object()){
                data.l_type = this.activeName;
                data.page = this.current;
                conf.common.loglist(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        // console.log(res);
                        this.list = res.data.data;
                        if(this.initdate){
                            this.searchData.start_time = res.data.start;
                            this.searchData.end_time = res.data.end;
                        }
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else if(res.data.code == -404){
                            this.list = [];
                            res.data.msg = JSON.parse(res.data.msg);
                            if(this.initdate){
                                this.searchData.start_time = res.data.start;
                                this.searchData.end_time = res.data.end;
                            }
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            },
            // 切换tab
            handleClick(tab, event) {
                console.log(tab.index);
                this.initdate = true;
                this.getList();
            },
            // 切换页码
            handleCurrentChange(val) {
                this.current = val;
                this.getList();
            },
            /*查询 */
            search () {
                this.initdate = false;
                let data  = this.searchData;
                this.getList(data);
            },
            //获取部门
            obtainName(data=Object()){
                conf.department.nameOpt(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        this.optionName = res.data.data;
                        // console.log(res); 
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else if(res.data.code == -404){
                            this.optionName = [];
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            },
            //获取部门员工
            obtainUser(val,data=Object()){
                this.userType = [];
                data.d_id = val;
                conf.department.userOpt(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        // console.log(res); 
                        this.userType = res.data.data;
                    }else if(state == 'success'&&res.data.code != 0){
                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            },
        },
        mounted (){
            this.$nextTick(function(){
                this.getList();
                this.obtainName();
            })
        },
        
    }
</script>